<template>
  <div class="system-settings">
    <div class="settings-container">
      <el-row :gutter="20">
        <!-- 左侧设置菜单 -->
        <el-col :span="6">
          <div class="settings-menu">
            <el-menu
              v-model="activeSection"
              class="settings-menu-list"
              @select="handleMenuSelect"
            >
              <el-menu-item index="ai">
                <el-icon><Monitor /></el-icon>
                AI配置
              </el-menu-item>
              <el-menu-item index="chat">
                <el-icon><ChatDotRound /></el-icon>
                对话设置
              </el-menu-item>
              <el-menu-item index="knowledge">
                <el-icon><Document /></el-icon>
                知识库配置
              </el-menu-item>
              <el-menu-item index="notification">
                <el-icon><Bell /></el-icon>
                通知设置
              </el-menu-item>
              <el-menu-item index="security">
                <el-icon><Lock /></el-icon>
                安全设置
              </el-menu-item>
              <el-menu-item index="system">
                <el-icon><Setting /></el-icon>
                系统配置
              </el-menu-item>
            </el-menu>
          </div>
        </el-col>

        <!-- 右侧设置内容 -->
        <el-col :span="18">
          <div class="settings-content">
            <!-- AI配置 -->
            <div v-show="activeSection === 'ai'" class="setting-section">
              <div class="section-header">
                <h3>AI配置</h3>
                <p>配置AI模型参数和行为设置</p>
              </div>
              
              <el-form :model="aiSettings" label-width="120px">
                <el-form-item label="AI模型:">
                  <el-select v-model="aiSettings.model" style="width: 300px">
                    <el-option label="GPT-3.5 Turbo" value="gpt-3.5-turbo" />
                    <el-option label="GPT-4" value="gpt-4" />
                    <el-option label="Claude" value="claude" />
                    <el-option label="自定义模型" value="custom" />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="响应温度:">
                  <el-slider
                    v-model="aiSettings.temperature"
                    :min="0"
                    :max="2"
                    :step="0.1"
                    show-tooltip
                    style="width: 300px"
                  />
                  <span class="setting-tip">控制AI回复的创造性，值越高越有创意</span>
                </el-form-item>
                
                <el-form-item label="最大令牌数:">
                  <el-input-number
                    v-model="aiSettings.maxTokens"
                    :min="100"
                    :max="4000"
                    style="width: 300px"
                  />
                </el-form-item>
                
                <el-form-item label="响应超时:">
                  <el-input-number
                    v-model="aiSettings.timeout"
                    :min="5"
                    :max="60"
                    style="width: 300px"
                  />
                  <span class="setting-tip">秒</span>
                </el-form-item>
                
                <el-form-item label="启用上下文:">
                  <el-switch v-model="aiSettings.enableContext" />
                  <span class="setting-tip">保持对话上下文记忆</span>
                </el-form-item>
              </el-form>
            </div>

            <!-- 对话设置 -->
            <div v-show="activeSection === 'chat'" class="setting-section">
              <div class="section-header">
                <h3>对话设置</h3>
                <p>配置聊天界面和对话行为</p>
              </div>
              
              <el-form :model="chatSettings" label-width="120px">
                <el-form-item label="欢迎消息:">
                  <el-input
                    v-model="chatSettings.welcomeMessage"
                    type="textarea"
                    :rows="3"
                    style="width: 500px"
                  />
                </el-form-item>
                
                <el-form-item label="会话超时:">
                  <el-input-number
                    v-model="chatSettings.sessionTimeout"
                    :min="5"
                    :max="120"
                    style="width: 300px"
                  />
                  <span class="setting-tip">分钟</span>
                </el-form-item>
                
                <el-form-item label="最大消息长度:">
                  <el-input-number
                    v-model="chatSettings.maxMessageLength"
                    :min="100"
                    :max="2000"
                    style="width: 300px"
                  />
                </el-form-item>
                
                <el-form-item label="启用快捷回复:">
                  <el-switch v-model="chatSettings.enableQuickReplies" />
                </el-form-item>
                
                <el-form-item label="启用打字指示器:">
                  <el-switch v-model="chatSettings.enableTypingIndicator" />
                </el-form-item>
                
                <el-form-item label="快捷回复列表:">
                  <el-tag
                    v-for="(reply, index) in chatSettings.quickReplies"
                    :key="index"
                    closable
                    @close="removeQuickReply(index)"
                    style="margin-right: 8px; margin-bottom: 8px;"
                  >
                    {{ reply }}
                  </el-tag>
                  <el-input
                    v-if="showQuickReplyInput"
                    v-model="newQuickReply"
                    size="small"
                    style="width: 120px"
                    @keyup.enter="addQuickReply"
                    @blur="addQuickReply"
                  />
                  <el-button
                    v-else
                    size="small"
                    @click="showQuickReplyInput = true"
                  >
                    + 添加
                  </el-button>
                </el-form-item>
              </el-form>
            </div>

            <!-- 知识库配置 -->
            <div v-show="activeSection === 'knowledge'" class="setting-section">
              <div class="section-header">
                <h3>知识库配置</h3>
                <p>配置知识库搜索和匹配参数</p>
              </div>
              
              <el-form :model="knowledgeSettings" label-width="120px">
                <el-form-item label="默认匹配阈值:">
                  <el-slider
                    v-model="knowledgeSettings.defaultMatchThreshold"
                    :min="0.1"
                    :max="1"
                    :step="0.1"
                    show-tooltip
                    style="width: 300px"
                  />
                </el-form-item>
                
                <el-form-item label="最大搜索结果:">
                  <el-input-number
                    v-model="knowledgeSettings.maxSearchResults"
                    :min="1"
                    :max="50"
                    style="width: 300px"
                  />
                </el-form-item>
                
                <el-form-item label="启用模糊匹配:">
                  <el-switch v-model="knowledgeSettings.enableFuzzyMatch" />
                </el-form-item>
                
                <el-form-item label="自动学习:">
                  <el-switch v-model="knowledgeSettings.enableAutoLearning" />
                  <span class="setting-tip">从用户反馈中自动优化知识库</span>
                </el-form-item>
                
                <el-form-item label="缓存时间:">
                  <el-input-number
                    v-model="knowledgeSettings.cacheTime"
                    :min="1"
                    :max="24"
                    style="width: 300px"
                  />
                  <span class="setting-tip">小时</span>
                </el-form-item>
              </el-form>
            </div>

            <!-- 通知设置 -->
            <div v-show="activeSection === 'notification'" class="setting-section">
              <div class="section-header">
                <h3>通知设置</h3>
                <p>配置系统通知和提醒</p>
              </div>
              
              <el-form :model="notificationSettings" label-width="120px">
                <el-form-item label="邮件通知:">
                  <el-switch v-model="notificationSettings.enableEmail" />
                </el-form-item>
                
                <el-form-item label="短信通知:">
                  <el-switch v-model="notificationSettings.enableSMS" />
                </el-form-item>
                
                <el-form-item label="浏览器通知:">
                  <el-switch v-model="notificationSettings.enableBrowser" />
                </el-form-item>
                
                <el-form-item label="低满意度提醒:">
                  <el-switch v-model="notificationSettings.lowSatisfactionAlert" />
                </el-form-item>
                
                <el-form-item label="系统异常提醒:">
                  <el-switch v-model="notificationSettings.systemErrorAlert" />
                </el-form-item>
              </el-form>
            </div>

            <!-- 安全设置 -->
            <div v-show="activeSection === 'security'" class="setting-section">
              <div class="section-header">
                <h3>安全设置</h3>
                <p>配置系统安全和访问控制</p>
              </div>
              
              <el-form :model="securitySettings" label-width="120px">
                <el-form-item label="启用IP白名单:">
                  <el-switch v-model="securitySettings.enableIPWhitelist" />
                </el-form-item>
                
                <el-form-item label="会话加密:">
                  <el-switch v-model="securitySettings.enableEncryption" />
                </el-form-item>
                
                <el-form-item label="访问日志:">
                  <el-switch v-model="securitySettings.enableAccessLog" />
                </el-form-item>
                
                <el-form-item label="敏感词过滤:">
                  <el-switch v-model="securitySettings.enableContentFilter" />
                </el-form-item>
                
                <el-form-item label="最大并发连接:">
                  <el-input-number
                    v-model="securitySettings.maxConcurrentConnections"
                    :min="10"
                    :max="1000"
                    style="width: 300px"
                  />
                </el-form-item>
              </el-form>
            </div>

            <!-- 系统配置 -->
            <div v-show="activeSection === 'system'" class="setting-section">
              <div class="section-header">
                <h3>系统配置</h3>
                <p>配置系统运行参数</p>
              </div>
              
              <el-form :model="systemSettings" label-width="120px">
                <el-form-item label="系统语言:">
                  <el-select v-model="systemSettings.language" style="width: 300px">
                    <el-option label="中文" value="zh-CN" />
                    <el-option label="English" value="en-US" />
                    <el-option label="日本語" value="ja-JP" />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="时区:">
                  <el-select v-model="systemSettings.timezone" style="width: 300px">
                    <el-option label="北京时间 (UTC+8)" value="Asia/Shanghai" />
                    <el-option label="东京时间 (UTC+9)" value="Asia/Tokyo" />
                    <el-option label="纽约时间 (UTC-5)" value="America/New_York" />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="日志级别:">
                  <el-select v-model="systemSettings.logLevel" style="width: 300px">
                    <el-option label="DEBUG" value="debug" />
                    <el-option label="INFO" value="info" />
                    <el-option label="WARN" value="warn" />
                    <el-option label="ERROR" value="error" />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="数据备份:">
                  <el-switch v-model="systemSettings.enableBackup" />
                </el-form-item>
                
                <el-form-item label="性能监控:">
                  <el-switch v-model="systemSettings.enableMonitoring" />
                </el-form-item>
              </el-form>
            </div>

            <!-- 保存按钮 -->
            <div class="settings-actions">
              <el-button @click="resetSettings">重置设置</el-button>
              <el-button type="primary" @click="saveSettings" :loading="saving">
                保存设置
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Monitor,
  ChatDotRound,
  Document,
  Bell,
  Lock,
  Setting
} from '@element-plus/icons-vue'

// 响应式数据
const activeSection = ref('ai')
const saving = ref(false)
const showQuickReplyInput = ref(false)
const newQuickReply = ref('')

// 设置数据
const aiSettings = ref({
  model: 'gpt-3.5-turbo',
  temperature: 0.7,
  maxTokens: 2000,
  timeout: 30,
  enableContext: true
})

const chatSettings = ref({
  welcomeMessage: '您好！我是智能客服助手，很高兴为您服务。请问有什么可以帮助您的吗？',
  sessionTimeout: 30,
  maxMessageLength: 500,
  enableQuickReplies: true,
  enableTypingIndicator: true,
  quickReplies: ['你好', '谢谢', '我需要帮助', '产品咨询', '技术支持']
})

const knowledgeSettings = ref({
  defaultMatchThreshold: 0.5,
  maxSearchResults: 10,
  enableFuzzyMatch: true,
  enableAutoLearning: false,
  cacheTime: 2
})

const notificationSettings = ref({
  enableEmail: true,
  enableSMS: false,
  enableBrowser: true,
  lowSatisfactionAlert: true,
  systemErrorAlert: true
})

const securitySettings = ref({
  enableIPWhitelist: false,
  enableEncryption: true,
  enableAccessLog: true,
  enableContentFilter: true,
  maxConcurrentConnections: 100
})

const systemSettings = ref({
  language: 'zh-CN',
  timezone: 'Asia/Shanghai',
  logLevel: 'info',
  enableBackup: true,
  enableMonitoring: true
})

// 初始化
onMounted(() => {
  loadSettings()
})

// 菜单选择
const handleMenuSelect = (index: string) => {
  activeSection.value = index
}

// 添加快捷回复
const addQuickReply = () => {
  if (newQuickReply.value.trim()) {
    chatSettings.value.quickReplies.push(newQuickReply.value.trim())
    newQuickReply.value = ''
  }
  showQuickReplyInput.value = false
}

// 删除快捷回复
const removeQuickReply = (index: number) => {
  chatSettings.value.quickReplies.splice(index, 1)
}

// 保存设置
const saveSettings = async () => {
  saving.value = true
  
  try {
    // 这里应该调用保存设置的API
    // 目前使用本地存储模拟
    const settings = {
      ai: aiSettings.value,
      chat: chatSettings.value,
      knowledge: knowledgeSettings.value,
      notification: notificationSettings.value,
      security: securitySettings.value,
      system: systemSettings.value
    }
    
    localStorage.setItem('aiCustomerServiceSettings', JSON.stringify(settings))
    
    ElMessage.success('设置保存成功')
  } catch (error) {
    ElMessage.error('设置保存失败')
  } finally {
    saving.value = false
  }
}

// 加载设置
const loadSettings = () => {
  try {
    const savedSettings = localStorage.getItem('aiCustomerServiceSettings')
    if (savedSettings) {
      const settings = JSON.parse(savedSettings)
      
      if (settings.ai) aiSettings.value = { ...aiSettings.value, ...settings.ai }
      if (settings.chat) chatSettings.value = { ...chatSettings.value, ...settings.chat }
      if (settings.knowledge) knowledgeSettings.value = { ...knowledgeSettings.value, ...settings.knowledge }
      if (settings.notification) notificationSettings.value = { ...notificationSettings.value, ...settings.notification }
      if (settings.security) securitySettings.value = { ...securitySettings.value, ...settings.security }
      if (settings.system) systemSettings.value = { ...systemSettings.value, ...settings.system }
    }
  } catch (error) {
    console.error('加载设置失败:', error)
  }
}

// 重置设置
const resetSettings = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要重置所有设置到默认值吗？此操作不可恢复。',
      '重置确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 清除本地存储
    localStorage.removeItem('aiCustomerServiceSettings')
    
    // 重新加载页面或重置数据
    location.reload()
  } catch {
    // 用户取消
  }
}
</script>

<style scoped>
.system-settings {
  padding: 20px;
  background: #f8f9fa;
  min-height: 600px;
}

.settings-container {
  max-width: 1200px;
  margin: 0 auto;
}

.settings-menu {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.settings-menu-list {
  border: none;
}

.settings-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  min-height: 600px;
}

.setting-section {
  padding: 30px;
}

.section-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.section-header h3 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 20px;
}

.section-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.setting-tip {
  margin-left: 10px;
  font-size: 12px;
  color: #999;
}

.settings-actions {
  padding: 20px 30px;
  border-top: 1px solid #eee;
  text-align: right;
}

:deep(.el-form-item) {
  margin-bottom: 25px;
}

:deep(.el-form-item__label) {
  font-weight: 600;
  color: #333;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-menu-item.is-active) {
  background: #f0f9ff;
  color: #409EFF;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .settings-container :deep(.el-col-6) {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .settings-container :deep(.el-col-18) {
    width: 100%;
  }
  
  .setting-section {
    padding: 20px;
  }
  
  .settings-actions {
    padding: 15px 20px;
  }
}
</style>


